<template>
	<div class="dialog-wrapper" v-if="showAdd">
		<div class="dialog-block">
			<i class="el-icon-circle-close-outline icon-del" @click="changeShow"></i>
			<div class="dialog">
				<p class="title">{{dialogObj.title}}</p>
				<div class="inp-wrapper">
					<span class="inp-name">{{dialogObj.inpName}}</span>
					<input type="text" class="input-picName" v-model="inputPicName" />
				</div>
				<input type="file" name="tupian" @change="uploadChange" ref="upload_file" style="display: none;" />
				<div class="picture" @click="upload">
					<img class="item-pic" :src="preSrc" alt="">
					<div class="shade" v-show=" dialogObj.shade != ''">{{dialogObj.shade}}</div>
				</div>
				<input type="button" class="up-btn" @click="uploadPic" :value="dialogObj.btnName" />
			</div>
		</div>
	</div>
</template>

<script>
	import { addPic, editPic } from "@/api/picPool";
	export default {
		name: "picDialog",
		props: {
			showAdd: {
				type: Boolean,
				default: false
			},
			dialogObj: {
				type: Object,
				default: null
			}
		},
		data() {
			return {
				preSrc: this.dialogObj.src,
				// files: '',
				files: "",
				inputPicName: this.dialogObj.placeholder,
				src: "",
				updateTime: "",
				createTime: "",
				updateTime: ""
			};
		},
		updated() {
			console.log(this.dialogObj);
		},
		methods: {
			preClick() {
				this.preSrc = this.dialogObj.src;
			},
			uploadChange(event) {
				if(event.target.files.length > 0) {
					this.files = event.target.files[0];
					this.preSrc = window.URL.createObjectURL(this.files);
				}
			},
			upload() {
				this.$refs.upload_file.click();
			},
			changeShow() {
				this.$emit("hidden-show");
			},
			uploadPic() {
				if(this.dialogObj.title === "编辑图片") {
					console.log("编辑");
					var this_ = this
					console.log(this.dialogObj, "****dialogObj");
					console.log(this.inputPicName, "****inputPicName");
					var inputPicName_ = this.inputPicName

					var formData = new FormData();

					formData.append("file", this.files);
					var id_ = this.dialogObj.id
					console.log(id_, "id_id_")
					$.ajax({
						url: "http://172.17.99.10:10014//zuul/api/jp-TIFS-FileCenter-ms/file",
						type: 'POST',
						data: formData,
						// 告诉jQuery不要去处理发送的数据
						processData: false,
						// 告诉jQuery不要去设置Content-Type请求头
						contentType: false,
						dataType: "json",
						success: function(res) {
							formData.delete("file")
							let nowDate = new Date();
							let year = nowDate.getFullYear();
							let month = nowDate.getMonth() + 1;
							month = month < 10 ? "0" + month : month;
							let date = nowDate.getDate();
							date = date < 10 ? "0" + date : date;
							let hours = nowDate.getHours()
							hours = hours < 10 ? "0" + hours : hours
							let minutes = nowDate.getMinutes()
							minutes = minutes < 10 ? '0' + minutes : minutes
							let seconds = nowDate.getSeconds()
							seconds = seconds < 10 ? "0" + seconds : seconds
							this.updateTime = year + "-" + month + "-" + date + "T" + hours + ":" + minutes + ":" + seconds + ".256Z+8:00";
							console.log(this.updateTime, "this.updateTime")

							console.log(res, "file");
							console.log(this.dialogObj, "this.dialogObj")

							var objList = {
								"id": id_,
								"name": inputPicName_,
								"storeId": res.fileID,
								"updateTime": this.updateTime,
								"updateUserId": sessionStorage.getItem("userId")
							}
							console.log(objList, "objListobjList")

							editPic(objList).then(
								function(res) {
									console.log(res, "objList===res");
									// formData.delete("file");
									this_.$emit("uploadpicture");
								});
						}
					})

				} else if(this.dialogObj.title === "新增图片") {
					var this_ = this;
					console.log("新增");
					console.log(this.dialogObj, "****新增");
					var inputPicName_ = this.inputPicName

					var formData = new FormData();
					formData.append("file", this.files);
					// formData.append("name", this.inputPicName);
					// formData.append("createUserId", 1);
					// formData.append("createTime", this.createTime);
					$.ajax({
						url: "http://172.17.99.10:10014//zuul/api/jp-TIFS-FileCenter-ms/file",
						type: 'POST',
						data: formData,
						// 告诉jQuery不要去处理发送的数据
						processData: false,
						// 告诉jQuery不要去设置Content-Type请求头
						contentType: false,
						dataType: "json",
						success: function(res) {

							let nowDate = new Date();
							let year = nowDate.getFullYear();
							let month = nowDate.getMonth() + 1;
							month = month < 10 ? "0" + month : month;
							let date = nowDate.getDate();
							date = date < 10 ? "0" + date : date;
							let hours = nowDate.getHours()
							hours = hours < 10 ? "0" + hours : hours
							let minutes = nowDate.getMinutes()
							minutes = minutes < 10 ? '0' + minutes : minutes
							let seconds = nowDate.getSeconds()
							seconds = seconds < 10 ? "0" + seconds : seconds
							this.createTime = year + "-" + month + "-" + date + "T" + hours + ":" + minutes + ":" + seconds + ".256Z+8:00";
							console.log(this.createTime, "this.createTime")

							console.log(res, "file");

							var objList = {
								"createTime": this.createTime,
								"createUserId": sessionStorage.getItem("userId"),
								"name": inputPicName_,
								"storeId": res.fileID,
								"updateTime": this.createTime,
								// "updateUserId": "string"
							}
							addPic(objList).then(
								function(res) {
									console.log(res, "objList===res");
									// formData.delete("file");
									this_.$emit("uploadpicture");
								});
						}
					})

				} else if(this.dialogObj.title === "新增图片1") {

					var formData = new FormData();
					formData.append("file", this.files);
					console.log(formData.get("file"));
					
					let nowDate = new Date();
							let year = nowDate.getFullYear();
							let month = nowDate.getMonth() + 1;
							month = month < 10 ? "0" + month : month;
							let date = nowDate.getDate();
							date = date < 10 ? "0" + date : date;
							let hours = nowDate.getHours()
							hours = hours < 10 ? "0" + hours : hours
							let minutes = nowDate.getMinutes()
							minutes = minutes < 10 ? '0' + minutes : minutes
							let seconds = nowDate.getSeconds()
							seconds = seconds < 10 ? "0" + seconds : seconds
							this.createTime = year + "-" + month + "-" + date + "T" + hours + ":" + minutes + ":" + seconds + ".256Z+8:00";
							console.log(this.createTime, "this.createTime");
			
							
					var objList = {
								"name": this.inputPicName,
								"createUserId": sessionStorage.getItem("userId"),
								"createTime": this.createTime,
							};
					
//         formData.append("name", this.inputPicName);
//					formData.append("createUserId", 1);
//					formData.append("createTime", this.createTime);
//					
					
					this.$emit("hidden-show", formData.get("file"), this.preSrc,objList);
					console.log("objList");
					console.log(objList);
					
				}
			}
		}
	};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.dialog-wrapper {
		position: absolute;
		top: -44px;
		left: -46px;
		width: calc(100% + 88px);
		height: calc(100% + 44px);
		text-align: center;
		z-index: 2;
		background-color: rgba(0, 0, 0, 0.5);
		.dialog-block {
			margin-left: 82px;
			.icon-del {
				margin-top: 182px;
				font-size: 34px;
				padding: 30px;
				cursor: pointer;
				color: #fff;
				&::after {
					display: block;
					width: 1px;
					height: 52px;
					margin-left: 50%;
					margin-bottom: -34px;
					background-color: #fff;
					content: "";
				}
			}
			.dialog {
				position: relative;
				width: 777px;
				height: 477px;
				margin-left: calc(50% - 388.8888px);
				border-radius: 10px;
				background-color: #fff;
				.title {
					margin: 0;
					text-align: left;
					line-height: 20px;
					font-size: 20px;
					font-weight: 700;
					&::before {
						display: inline-block;
						margin: 12px 10px 0 12px;
						vertical-align: bottom;
						width: 8px;
						height: 20px;
						background-color: #2ce2e0;
						content: "";
					}
				}
				.inp-wrapper {
					margin-top: 48px;
					text-align: left;
					.inp-name {
						margin: 0 9px 0 29px;
						font-size: 18px;
					}
				}
				.picture {
					position: relative;
					width: 120px;
					height: 120px;
					margin: 26px 0 0 119px;
					display: flex;
					justify-content: center;
					overflow: hidden;
					border-radius: 4px;
					cursor: pointer;
					background-color: #29333d;
					.item-pic {
						position: absolute;
						max-width: 120px;
						max-height: 120px;
						margin: auto;
						margin-left: -88px;
						top: 0;
						bottom: 0;
						border-right: 52px solid transparent;
						filter: drop-shadow(115px 0 #93c4ff);
					}
					.shade {
						width: 120px;
						height: 34px;
						margin-top: 43px;
						color: #fff;
						line-height: 34px;
						font-size: 14px;
						z-index: 1;
						background-color: rgba(51, 80, 115, 0.8);
					}
				}
				.up-btn {
					position: absolute;
					bottom: 30px;
					width: 100px;
					height: 34px;
					margin-left: -50px;
					line-height: 34px;
					font-size: 18px;
					color: #2de3e1;
					background-color: #f2f4f9;
					border: 1px solid #2de3e1;
					border-radius: 4px;
				}
			}
		}
	}
</style>